<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      layout:decorator="layout">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}"></title>
</head>
<body>
<!-- Begin Page Content -->
<div class="container-fluid mt-4" layout:fragment="content">
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                搜索&添加
                <span id="operators_pack_btn" style="cursor: pointer"><i class="fas fa-angle-up"></i></span>
            </h6>
        </div>
        <div class="card-body" id="operators_panel">
            <!--<div id="operators_panel">-->
                        <div class="row screen-group">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 form-group">
                        <label>编号：</label>
                        <input class="form-control" type="text" id="id"/>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 form-group">
                        <label>上级：</label>
<!--                        <input class="form-control" type="text" id="parentId"/>-->
                    <select class="form-control" id="parentId">
                        <option value="-1">全部</option>
                        <option th:each="menu:${menus}" th:value="${menu.id}" th:text="${menu.menuName}"></option>
                    </select>
                </div>
            </div>
            <div class="row screen-group">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 form-group">
                        <label>菜单名字：</label>
                        <input class="form-control" type="text" id="menuName"/>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 form-group">
                        <label>功能路径：</label>
                        <input class="form-control" type="text" id="menuUrl"/>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 form-group">

                </div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 form-group">
                    <button type="button" class="btn btn-secondary btn-block btn-bottom" id="add">新增</button>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 form-group">
                    <button type="button" class="btn btn-primary btn-block btn-bottom" id="searchBt">搜索</button>
                </div>
            </div>
        </div>
    </div>

    <!--数据-->
    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                数据
                <!--<a href="#" style="float:right;font-weight: normal;">下载</a>-->
                <button type="button" class="btn btn-link" style="float:right;font-weight: normal;display: none;">下载</button>
            </h6>

        </div>
        <div class="card-body">
            <div class="table-responsive" id="data">
            </div>
        </div>
    </div>

    <div class="modal fade" id="edit_body" tabindex="-1" role="dialog" aria-labelledby="menu_examine_lable" aria-hidden="true" style="z-index: 1051">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="menu_examine_lable">菜单信息修改</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="menuClasify-detailed" data-id='' data-restaurantId="">
                        <form class="form-horizontal">
                            <input id="postUrl" type="hidden"/>
                            <input id="id_edit" type="hidden"/>
                                                                 <div class="form-group">
                                        <label class="control-label">上级编号：</label>
<!--                                            <input type="text" class="form-control" id="parentId_edit" placeholder=""-->
<!--                                                   role="button" data-toggle="popover" data-placement="bottom"-->
<!--                                                   data-trigger="focus" data-content="">-->
                                             <select class="form-control" id="parentId_edit">
                                                 <option value="0">无</option>
                                                 <option th:each="menu:${menus}" th:value="${menu.id}" th:text="${menu.menuName}"></option>
                                             </select>
                                    </div>
                                     <div class="form-group">
                                        <label class="control-label">菜单名字：</label>
                                            <input type="text" class="form-control" id="menuName_edit" placeholder=""
                                                   role="button" data-toggle="popover" data-placement="bottom"
                                                   data-trigger="focus" data-content="">
                                    </div>
                                     <div class="form-group">
                                        <label class="control-label">功能路径：</label>
                                            <input type="text" class="form-control" id="menuUrl_edit" placeholder=""
                                                   role="button" data-toggle="popover" data-placement="bottom"
                                                   data-trigger="focus" data-content="">
                                    </div>

                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary preserve-btn" id="save">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>

<th:block layout:fragment="js">
    <script type="text/javascript">
        // var csrfToken = $("meta[name='_csrf']").attr("content");
        var parentMenuMap={};
        $("#parentId_edit option").each(function () {
            parentMenuMap[$(this).val()]=$(this).text()
        })

        $(function(){
            $("#operators_pack_btn").click(function () {
                if ($("#operators_panel").is(":hidden")) {
                    $("#operators_panel").show(100);
                    $(this).html("<i class=\"fas fa-angle-up\"></i>");
                } else {
                    $("#operators_panel").hide(100);
                    $(this).html("<i class=\"fas fa-angle-down\"></i>");
                }
            });

            $("#searchBt").click(function(){
                search();
            });
            $("#save").click(save);
            search();
            $("#add").click(function(){
                $("#menu_examine_lable").html("菜单信息添加");
                $("#postUrl").val("[[@{/system/manageMenu/add}]]");
                $("#id_edit").val("");
                $("#parentId_edit").val("0");
                $("#menuName_edit").val("");
                $("#menuUrl_edit").val("");

                $("#id_edit").val("0");
                $("#edit_body").modal("show");
            })
            $("#description ").keyEnterEvent(search);
            $("#authname").keyEnterEvent(search);
        });

        function search(){
            var data={
                '_csrf':csrfToken
            };
                        if($("#id").val()!=""){
                data['id']=$("#id").val();
            }
            if($("#parentId").val()!=""){
                data['parentId']=$("#parentId").val();
            }
            if($("#menuName").val()!=""){
                data['menuName']=$("#menuName").val();
            }
            if($("#menuUrl").val()!=""){
                data['menuUrl']=$("#menuUrl").val();
            }

            $("#data").datagrid("load",{
                url:"[[@{/system/manageMenu/search}]]",
                data:data,
                showDetail:true,
                colResizeEnable:true,
                fields:[
                                        {name: "id", autoHidden: true, text: "编号", inTable: true},
                    {name: "parentId", autoHidden: true, text: "上级编号", inTable: false},
                    {name: "parentMenu", autoHidden: true, text: "上级名字", inTable: true,render:function (row) {
                            return parentMenuMap[row.parentId];
                        }},
                    {name: "menuName", autoHidden: false, text: "菜单名字", inTable: true},
                    {name: "menuUrl", autoHidden: false, text: "功能路径", inTable: true}
                ],
                operations:[
                    {name:"edit",autoHidden:false,text:"修改",inTable:true,handler:function(row){
                            $("#menu_examine_lable").html("修改【菜单信息】");
                            $("#postUrl").val("[[@{/system/manageMenu/modify}]]");
                            $("#id_edit").val(row.id);
                            $("#parentId_edit").val(row.parentId);
                            $("#menuName_edit").val(row.menuName);
                            $("#menuUrl_edit").val(row.menuUrl);

                            $("#edit_body").modal("show");
                        }},
                    {name:"remove",autoHidden:false,text:"删除",inTable:true,handler:function(row,preRow,nextRow){
                            if (confirm("确定要删除吗？")) {
                                var postUrl = "[[@{/system/manageMenu/delete}]]";
                                var data = {id: row.id,  '_csrf':csrfToken};
                                $.doSubmit({
                                    submitUrl: postUrl,
                                    data: data,
                                    callBack: function (response) {
                                        var redata = $.parseJSON(response);
                                        if (redata.ok) {
                                            if(preRow==null&&nextRow==null){
                                                search();
                                            }else {
                                                $("#data").datagrid("reload");
                                            }
                                        } else {
                                            alert(redata.msg);
                                        }
                                    },
                                    webContext: '${webContext}'
                                });
                            }
                        }}
                ],
                dialogTitle:"菜单信息",
                webContext:webContext
            });
        }
        function save(){
                    var postUrl = $("#postUrl").val();
                    var data = {
                        id: $("#id_edit").val(),
                parentId: $("#parentId_edit").val(),
                menuName: $("#menuName_edit").val(),
                menuUrl: $("#menuUrl_edit").val(),

                        '_csrf':csrfToken
                    };
                    $.doSubmit({
                        submitUrl: postUrl,
                        data: data,
                        callBack: function(response) {
                            var redata = $.parseJSON(response);
                            if (redata.ok) {
                                //alert("保存成功");
                                var postUrl = $("#postUrl").val();
                                if (postUrl.indexOf("add") > -1) {//添加
                                    $("#data").datagrid("loadLastPage");
                                } else {//修改
                                    $("#data").datagrid("reload");
                                }
                                $("#edit_body").modal("hide");
                            } else {
                                alert(redata.msg);
                            }
                        },
                        webContext:webContext
                    });
                }
    </script>
</th:block>
</body>
</html>
